<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="author" content="李愧愧">
    <title></title>
    <style>
        main {
            width: 590px;
            height: 470px;
            margin: 0 auto;
            position: relative;
        }

        img {
            width: 100%;
            height: 100%;
            position: absolute;
            /* display: none; */
            opacity: 0;
            transition: all 0.3s;
        }

        img.active {
            /* display: inline-block; */
            opacity: 1;
        }

        ul {
            list-style: none;
            position: absolute;
            z-index: 100;
            width: 100%;
            bottom: 20px;
            padding: 0;
            text-align: center;
        }

        li {
            width: 20px;
            height: 20px;
            /* float: left; */
            background-color: white;
            border-radius: 50%;
            margin: 5px;
            display: inline-block;
            transition: all 0.5s;
            cursor: pointer;
        }

        li.active {
            background-color: #000;
            opacity: 0.5;
        }

        .arrows {
            width: 25px;
            height: 30px;
            position: absolute;
            z-index: 100;
            margin-top: 220px;
            background-color: #000;
            background-size: 100%;
            background-repeat: no-repeat;
            cursor: pointer;
            opacity: 0.3;

        }

        .left {
            left: 0px;
            background-image: url(./img/左箭头.png);
            border-top-right-radius: 50%;
            border-bottom-right-radius: 50%;
            background-position: -3px 3px;
        }

        .right {
            right: 0px;
            background-image: url(./img/右箭头.png);
            border-top-left-radius: 50%;
            border-bottom-left-radius: 50%;
            background-position: 3px 3px;
        }
    </style>
</head>

<body>
    <main>
        <div>
            <img class="active" src="./imgs/1.jpg" alt="">
            <img src="./imgs/2.webp" alt="">
            <img src="./imgs/3.jpg" alt="">
            <img src="./imgs/5.webp" alt="">
        </div>
        <ul>
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <div class="left arrows">

        </div>
        <div class="right arrows">

        </div>
    </main>
    <script>
        var imgs = document.querySelectorAll("img")
        var lis = document.querySelectorAll("ul li");
        var left = document.querySelector('.left');
        var right = document.querySelector(".right")
        console.log(imgs)
        console.dir(lis.length);
        var index = 0; //记录当前展示的图片索引
        // 切换图片(轮播)的函数
        function change() {
            imgs[index].className = ""
            lis[index].className = ""
            index++;
            // 最后一张结束后循环索引
            if (index > 3) {
                index = 0;
            }
            imgs[index].className = "active"
            lis[index].className = "active"
            console.log("轮播" + index);

            // 总结：循环操作数据常规步骤
            // 1.还原视图 2.更新索引 3.判断边界 4.更新视图
            left.onclick = function () {

                imgs[index].className = ""
                lis[index].className = ""
                index--;
                if (index > 3) {
                    index = 0;
                }
                if (index < 0) {
                    index = 3;
                }
                imgs[index].className = "active"
                lis[index].className = "active"
                console.log("点击" + index);
                clearInterval(time)
                time = setInterval(change, 2000);
            }
            right.onclick = function () {
                imgs[index].className = ""
                lis[index].className = ""
                index++;
                if (index > 3) {
                    index = 0;
                }
                if (index < 0) {
                    index = 3;
                }
                imgs[index].className = "active"
                lis[index].className = "active"
                console.log("点击" + index);
                clearInterval(time)
                time = setInterval(change, 2000);
            }
            console.log("现在" + index)
            for (var i = 0; i < lis.length; i++) {
                lis[i].index = i;
                lis[i].onmouseenter = function () {
                    index = this.index;
                    for (var j = 0; j < lis.length; j++) {
                        imgs[j].className = ""
                        lis[j].className = ""
                    }
                    console.dir(this);
                    imgs[index].className = "active"
                    lis[index].className = "active"
                    clearInterval(time)
                    time = setInterval(change, 2000);
                }
            }

        }
        var time = setInterval(change, 2000);
    </script>
</body>

</html>